(function($f) {	$f.extend.custom("myPlugin1", function(self) {

	"use strict";
	
	// plugin info
	this.info = {
		title: "My Plugin 1",
		version: "0.0.1" // major.minor.build
	};

	// plugin state (contents here-in must be JSON serializable)
	// if items are defined here, these will be preserved across page refresh (by 
	// serializing/deserializing transparently)
	this.state = { 
		var1: 10,		
		var2: Date.now(),
		var3: "myPlugin1 String",
		var4: false
	};
	
	// called just before the state is being picked for
	// persiatance 
	this.beforeSaveState = function() {
		// change value 
		var oldValue = self.state.var1;
		self.state.var1 = self.state.var1 + 4000;
		
		// log (although this will not show up in events log - because DOM is cleared on page refresh)
		$("#eventsLog").append("<p>beforeSaveState: state value of var1 of plugin " + self.handle.name + " is changed from " + oldValue.toString() + " to " + self.state.var1.toString() + " for storage.");
	};
	
	// called when state of the plugin is reloaded 
	// from persiatance store
	this.afterLoadState = function() {
		// restore value 
		self.state.var1 = self.state.var1 - 4000;
		
		// log
		$("#eventsLog").append("<p>afterLoadState: state value of var1 of plugin " + self.handle.name + " is restored to " + self.state.var1.toString() + ".");
	};
}); }(fluid));
